<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="90px"
      class="globalSerchFormStyle"
      :label-position="labelPosition"
    >
      <el-row>
        <!-- 仅admin可看 -->
        <el-col :span="6" v-if="$store.state.user.userLevel === null">
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- admin 和 油企可看 -->
        <el-col
          :span="6"
          v-if="
            $store.state.user.userLevel === null ||
            $store.state.user.userLevel === '1'
          "
        >
          <el-form-item label="油站名称" prop="stationId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择油站名称"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户手机号" prop="mobilePhone">
            <el-input
              style="width: 180px"
              v-model="queryParams.mobilePhone"
              placeholder="请输入客户手机号"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册时间" prop="exChangeTimeRange">
            <el-date-picker
              v-model="exChangeTimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              style="width: 180px"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="会员编码" prop="memberCode" size="small">
            <el-input
              style="width: 170px"
              v-model="queryParams.memberCode"
              placeholder="请输入会员编码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row
      class="global_el_rowStyle"
      :gutter="10"
      style="
        border-top: none;
        border-bottom: 1px solid #f5f5f5;
        margin-top: 0px;
      "
    >
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="resetQuery"
          size="mini"
          icon="el-icon-refresh"
          plain
          >重置</el-button
        >
      </el-col>
    </el-row>
    <!-- 数据汇总 -->
    <div class="sumtotal">
      <el-card shadow="always">
        <el-row>
          <el-col :span="4">
            <span>电子卡本金账户余额总计</span><br />
            <b>{{ cardSumInfo.amt ? cardSumInfo.amt : 0 }} 元</b>
          </el-col>
          <el-col :span="4">
            <span>电子卡赠送账户余额总计</span><br />
            <b>{{ cardSumInfo.presentAmt ? cardSumInfo.presentAmt : 0 }} 元</b>
          </el-col>
          <el-col :span="4">
            <span>返利账户余额总计</span><br />
            <b>{{ cardSumInfo.returnCashAmt ? cardSumInfo.returnCashAmt : 0 }} 元</b>
          </el-col>
          <el-col :span="4">
            <span>电子卡总金额</span><br />
            <b>{{ cardSumInfo.totalAmt ? cardSumInfo.totalAmt : 0 }} 元</b>
          </el-col>
          <el-col :span="4">
            <span>会员人数总计</span><br />
            <b>{{ cardSumInfo.userCount ? cardSumInfo.userCount : 0 }} 人</b>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 列表 -->
    <el-table
      stripe
      style="width: 100%"
      :data="cardList"
      ref="cardTable"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="50" align="left">
      </el-table-column>
      <el-table-column
        prop="enterpriseName"
        label="油企名称"
        width="200"
        show-overflow-tooltip
        v-if="$store.state.user.userLevel === null"
      >
      </el-table-column>
      <el-table-column
        v-if="isShowStationName"
        prop="stationName"
        label="油站名称"
        width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="registeDate"
        label="注册时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mobilePhone"
        label="客户手机号"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="gasAmt" label="汽油卡本金账户" width="130">
      </el-table-column>
      <el-table-column prop="gasPresentAmt" label="汽油卡赠送账户" width="130">
      </el-table-column>
      <el-table-column prop="dieselAmt" label="柴油卡本金账户" width="130">
      </el-table-column>
      <el-table-column
        prop="dieselPresentAmt"
        label="柴油卡赠送账户"
        width="130"
      >
      </el-table-column>
      <el-table-column prop="lngAmt" label="LNG卡本金账户" width="130">
      </el-table-column>
      <el-table-column prop="lngPresentAmt" label="LNG卡赠送账户" width="130">
      </el-table-column>
      <el-table-column prop="cngAmt" label="CNG卡本金账户" width="130">
      </el-table-column>
      <el-table-column prop="cngPresentAmt" label="CNG卡赠送账户" width="130">
      </el-table-column>
      <el-table-column prop="genericAmt" label="通用卡本金账户" width="130">
      </el-table-column>
      <el-table-column prop="returnCashAmt" label="返利账户（元）" width="130">
      </el-table-column>
      <el-table-column prop="memberCode" label="会员编码" width="130" />
      <el-table-column
        prop="genericPresentAmt"
        label="通用卡赠送账户"
        width="130"
      >
      </el-table-column>
      <el-table-column width="130" property="gasolineCardAmt" label="汽油副卡账户"></el-table-column>
      <el-table-column width="130" property="dieselCardAmt" label="柴油副卡账户"></el-table-column>
      <el-table-column width="130" property="lngCardAmt" label="LNG副卡账户"></el-table-column>
      <el-table-column width="130" property="cngCardAmt" label="CNG副卡账户"></el-table-column>
      <el-table-column width="130" property="currencyCardAmt" label="通用副卡账户"></el-table-column>
      <el-table-column fixed="right" prop="" label="操作" width="360">
        <template slot-scope="{ row }">
          <el-button type="text" @click="gotoChargeDetail(row)"
            >充值明细</el-button
          >
          <el-button type="text" @click="gotoConsumerDetail(row)"
            >消费明细</el-button
          >
          <el-button type="text" @click="gotoChildCard(row)"
            >副卡详情</el-button
          >
          <el-button type="text" @click="gotoRecycleDetail(row)"
            >分配回收记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 充值明细 -->
    <DzkElectroicCardChargeList
      :electorCardDialog.sync="electorCardDialog"
      :currentRowData="currentRowData"
    ></DzkElectroicCardChargeList>

    <!-- 消费明细 -->
    <DzkElectroicCardConsumerList
      :electorCardConsumerDialog.sync="electorCardConsumerDialog"
      :currentRowData="currentRowData"
    ></DzkElectroicCardConsumerList>

     <!-- 副卡详情 -->
     <DzkElectroicCardChildList
      :childCardDialog.sync="childCardDialog"
      :currentRowData="currentRowData"
    ></DzkElectroicCardChildList>

     <!-- 分配回收详情 -->
     <DzkElectroicCardRecycleList
      :recycleDialog.sync="recycleDialog"
      :currentRowData="currentRowData"
    ></DzkElectroicCardRecycleList>
  </div>
</template>
<script>
import { enterpriseList } from "@/api/station/order";
import { listEnterpriseStation } from "@/api/dept";
import {
  getElectoricCardListApi,
  getCardSumApi,
} from "@/api/customer/dzk_Electroic_Card";
import DzkElectroicCardChargeList from "./Dzk_Electroic_Card_chargeList";
import DzkElectroicCardConsumerList from "./Dzk_Electroic_Card_consumerList";
import DzkElectroicCardChildList from "./Dzk_Electroic_Card_childCard";
import DzkElectroicCardRecycleList from "./Dzk_Electroic_Card_recycleDetail";
import { cloneDeep } from "lodash";
export default {
  name: "DzkElectroicCard",
  components: { DzkElectroicCardChargeList, DzkElectroicCardConsumerList , DzkElectroicCardChildList,DzkElectroicCardRecycleList},
  data() {
    return {
      labelPosition: "right",
      queryParams: {
        enterpriseId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,
        memberCode: null,
      },
      enterpriseList: [],
      stationList: [],
      exChangeTimeRange: [], // 注册时间范围
      cardList: [],
      total: 0,
      loading: false,
      electorCardDialog: false, // 充值明细抽屉
      electorCardConsumerDialog: false,
      childCardDialog: false, //副卡抽屉
      recycleDialog: false, //回收抽屉
      currentRowData: {}, // 当前选中行信息对象
      cardSumInfo: {}, // 电子卡总账信息对象
      isShowStationName: true, // 控制列表中是否展示
    };
  },
  created() {
    console.log(this.$store);
    this.getList();
    this.getCardSum();
    this.getEnterpriseList();
    // 如果当前是油企账号，则获取该企业下的油站
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      // console.log("是油企账号")
      this.getStationList(this.presentEnterprise.enterpriseId);
      if (this.presentEnterprise.cardUseRangeFlag === "1") {
        // 多站通用
        this.isShowStationName = false;
      } else if (this.presentEnterprise.cardUseRangeFlag === "2") {
        // 单站使用
        this.isShowStationName = true;
      } else {
        this.isShowStationName = true;
      }
    }
  },

  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },

    // 获取油站列表
    async getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationList = res;
      });
    },
    // 根据油企获取油站
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 搜索
    handleQuery() {
      this.getList();
      this.getCardSum();
    },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.exChangeTimeRange = [];
      this.getList();
      this.getCardSum();
    },

    // 获取电子卡账户列表
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (this.exChangeTimeRange && this.exChangeTimeRange.length) {
        params.beginTime = this.exChangeTimeRange[0];
        params.endTime = this.exChangeTimeRange[1];
      }
      let userLevel = this.$store.state.user.userLevel;
      if (userLevel === "1") {
        // 油企账号登录
        params.enterpriseId = this.presentEnterprise.enterpriseId;
      }
      if (userLevel === "2") {
        // 油站账号登录
        params.enterpriseId = this.presentEnterprise.enterpriseId;
        params.stationId = this.presentSation;
      }
      const res = await getElectoricCardListApi(params);
      this.loading = false;
      this.cardList = res.rows;
      this.total = res.total;
    },

    // 获取电子卡总账
    async getCardSum() {
      const params = { ...this.queryParams };
      if (this.exChangeTimeRange && this.exChangeTimeRange.length) {
        params.beginTime = this.exChangeTimeRange[0];
        params.endTime = this.exChangeTimeRange[1];
      }
      let userLevel = this.$store.state.user.userLevel;
      if (userLevel === "1") {
        // 油企账号登录
        params.enterpriseId = this.presentEnterprise.enterpriseId;
      }
      if (userLevel === "2") {
        // 油站账号登录
        params.enterpriseId = this.presentEnterprise.enterpriseId;
        params.stationId = this.presentSation;
      }
      const res = await getCardSumApi(params);
      this.cardSumInfo = res.data;
    },
    // 充值明细
    gotoChargeDetail(row) {
      this.currentRowData = cloneDeep(row);
      this.electorCardDialog = true;
    },
    // 消费明细
    gotoConsumerDetail(row) {
      this.currentRowData = cloneDeep(row);
      this.electorCardConsumerDialog = true;
    },
    gotoRecycleDetail(row) {
      this.currentRowData = cloneDeep(row);
      this.recycleDialog = true;
    },
    gotoChildCard(row) {
      this.currentRowData = cloneDeep(row);
      this.childCardDialog = true;
    },
  },
};
</script>
<style scoped lang="scss">
.sumtotal {
  margin-bottom: 30px;
  .el-row {
    .el-col {
      text-align: center;
      border-right: 1px dashed #ddd;
      padding: 20px 10px;
      font-size: 15px;
      b {
        font-size: 22px;
      }
      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>
